<template>
  <div class="notification-config-page" v-loading="pageLoading">
    <div class="table-container">
      <vxe-table
        align="center"
        :data="tableSource"
        show-overflow
        show-header-overflow
        show-footer-overflow
        show-footer
        :column-config="{ resizable: true }"
        class="scrollbarStyle"
        height="99%"
        :sort-config="{ trigger: 'cell' }"
        ref="xTable"
        :scroll-x="{ gt: 10 }"
        :scroll-y="{ gt: 100 }"
        row-id="id"
        :checkbox-config="{
          reserve: true,
        }"
      >
        <!-- 序号 -->
        <vxe-column type="seq" width="80" title="序号"></vxe-column>
        <vxe-column
          :title="item.title"
          :field="item.key"
          :key="index"
          :min-width="item.width"
          show-overflow
          v-for="(item, index) in tableColumns"
        >
          <template slot-scope="scope">
            <div v-if="item.key == 'isOpen'">
              <span
                class="is-open-text"
                :class="scope.row[item.key] == '1' && 'open'"
              >
                {{ scope.row[item.key] == "1" ? "是" : "否" }}
              </span>
            </div>
            <span v-else>{{ scope.row[item.key] }}</span>
          </template>
        </vxe-column>
        <!-- 操作 -->
        <vxe-column title="操作" width="180" fixed="right" align="left">
          <template #default="{ row }">
            <a-button type="link" @click="manageGroup(row)">
              管理群组
            </a-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <!-- 群组管理弹窗 -->
    <manageGroupModal
      v-if="equNum"
      :visible.sync="visible"
      :groupIds="groupIds"
      :equNum="equNum"
      :isOpen="isOpen"
      :noticeType="noticeType"
    ></manageGroupModal>
  </div>
</template>

<script>
import { querynotificationList } from "@/api/user-center/equipmentManage.js";
import manageGroupModal from "../components/manageGroupModal.vue";
export default {
  components: {
    manageGroupModal,
  },
  data() {
    return {
      isOpen: "1",
      equNum: "",
      visible: false,
      pageLoading: false,
      tableSource: [],
      noticeType: "",
      tableColumns: [
        {
          title: "设备名称",
          dataIndex: "equName",
          key: "equName",
          width: "",
        },
        {
          title: "通知类型",
          dataIndex: "noticeName",
          key: "noticeName",
          width: "",
        },
        {
          title: "是否开启",
          dataIndex: "isOpen",
          key: "isOpen",
          width: "",
        },

        {
          title: "通知群组",
          dataIndex: "groupNames",
          key: "groupNames",
          width: "",
        },
      ],
    };
  },
  mounted() {
    this.querynotificationList();
  },
  methods: {
    //查询列表
    querynotificationList() {
      this.pageLoading = true;
      let { id = "" } = this.$route?.query || {};
      querynotificationList({ id })
        .then((res) => {
          let { data } = res;
          this.tableSource = data?.result || [];
        })
        .catch((_) => {
          this.tableSource = [];
        })
        .finally((_) => {
          this.pageLoading = false;
        });
    },

    //管理群组
    manageGroup(row) {
      let { equNum, groupIds, isOpen, noticeType } = row;
      this.groupIds = groupIds;
      this.equNum = equNum;
      this.isOpen = isOpen || "0";
      this.noticeType = noticeType;
      this.visible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.notification-config-page {
  padding: 20px 0 10px 0;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  .flex();
  flex-direction: column;
  .table-container {
    flex: 1;
    .is-open-text {
      color: var(--echart-pale-red);
      &.open {
        color: #4bc964;
      }
    }
  }
}
</style>
